<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN-->
    <!-- 小程序不需要返回（自带） -->
    <my-navbar leftText="收货地址" @leftClick="back"></my-navbar>
    <!-- #endif -->
    <view class="edit">
      <view class="row">
        <view class="prop">收货地址</view>
        <!-- <input type="text" @click="chooseMap" @input="inputAction($event,'address_name')" :value="address_name" /> -->
        <view class="chosoe_address" @click="chooseMap">{{
          address_name
        }}</view>
      </view>
      <view class="row">
        <view class="prop">门牌号</view>
        <input
          type="text"
          @input="inputAction($event, 'detail')"
          :value="detail"
        />
      </view>
      <view class="row">
        <view class="prop">联系人</view>
        <input type="text" @input="inputAction($event, 'name')" :value="name" />
      </view>
      <view class="row">
        <view class="prop">手机号</view>
        <input
          type="number"
          @input="inputAction($event, 'address_mobile')"
          :value="address_mobile"
        />
      </view>
    </view>
    <view class="submit flex-center fonts_26" @click="submit">保存</view>
  </view>
</template>

<script>
// import BaiduMap from 'vue-baidu-map'
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      address: "",
      address_name: "",
      name: "",
      address_mobile: "",
      detail: "",
      lng_mars: "",
      lat_mars: "",

      zid: null, //子账号id
    };
  },
  onLoad(options) {
    if (options.zid) {
      this.zid = options.zid;
      this.getChildData(this.zid);
    } else {
      this.getData();
    }
  },
  methods: {
    getData() {
      $https("GETN", "getUserInfo", {}, (res) => {
        this.address = res.data.data.address.address;
        this.address_name = res.data.data.address.address_name;
        this.detail = res.data.data.address.detail;
        this.name = res.data.data.address.name;
        this.address_mobile = res.data.data.address.mobile;
        this.lng_mars = res.data.data.address.lng_mars;
        this.lat_mars = res.data.data.address.lat_mars;
      });
    },
    getChildData(id) {
      $https("GETN", "ziAccountDetail", { id }, (res) => {
        this.address = res.data.data.address.address;
        this.address_name = res.data.data.address.address_name;
        this.detail = res.data.data.address.detail;
        this.name = res.data.data.address.name;
        this.address_mobile = res.data.data.address.mobile;
        this.lng_mars = res.data.data.address.lng_mars;
        this.lat_mars = res.data.data.address.lat_mars;
      });
    },
    inputAction(e, name) {
      this[name] = e.detail.value;
    },
    submit() {
      if (this.address && this.name && this.address_mobile) {
        var phone = this.address_mobile;
        if (!/^((0\d{2,3}-\d{7,8})|(1[23567894]\d{9}))$/.test(phone)) {
          uni.showToast({
            title: "手机号格式错误",
            icon: "none",
          });
          return false;
        } else if (!this.lng_mars || !this.lat_mars) {
          uni.showToast({
            title: "请重新选择收货地址",
            icon: "none",
          });
          return false;
        } else {
          let option = {
            address: this.address,
            address_name: this.address_name,
            detail: this.detail,
            name: this.name,
            address_mobile: this.address_mobile,
            lng_mars: this.lng_mars,
            lat_mars: this.lat_mars,
          };
          if (this.zid) {
            Object.assign(option, { zid: this.zid });
          }
          $https("POST", "editUserAddress", option, (res) => {
            if (res.data.errcode == 0) {
              uni.showToast({
                title: "修改成功",
                icon: "none",
                success: () => {
                  setTimeout(() => {
                    this.back();
                  }, 2000);
                },
              });
            } else {
              uni.showToast({
                title: res.data.errmsg,
                icon: "none",
              });
            }
          });
        }
      } else {
        if (this.address == "") {
          uni.showToast({
            title: "地址不能为空",
            icon: "none",
          });
        } else if (this.name == "") {
          uni.showToast({
            title: "联系人不能为空",
            icon: "none",
          });
        } else if (this.address_mobile == "") {
          uni.showToast({
            title: "手机号不能为空",
            icon: "none",
          });
        }
        // else if(this.detail == ''){
        // 	uni.showToast({
        // 		title: '门牌号不能为空',
        // 		icon:'none'
        // 	});
        // }
      }
    },
    chooseMap() {
      uni.getLocation({
        type: "gcj02",
        success: (result) => {
          uni.chooseLocation({
            latitude: result.latitude,
            longitude: result.longitude,
            success: (res) => {
              console.log(res, "rest");
              this.address = res.address;
              this.address_name = res.name;
              this.lat_mars = res.latitude;
              this.lng_mars = res.longitude;
              // this.hasLocation = true,
              // this.location = formatLocation(res.longitude, res.latitude),
              // this.locationAddress = res.address
            },
          });
        },
        fail: (e) => {
          console.log(e);
        },
      });
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .edit {
    padding: 20rpx 40rpx;
    color: #191919;
    .row {
      padding: 22rpx 0 0;
      border-bottom: 2px solid #ececec;
      .prop {
        font-size: 26rpx;
        font-weight: 600;
        color: #333;
      }
      input {
        font-size: 26rpx;
        margin-top: 24rpx;
        padding-left: 8rpx;
      }
      .chosoe_address {
        height: 88rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .submit {
    width: 566rpx;
    height: 88rpx;
    color: #fff;
    background: $dgreen;
    box-shadow: 0px 2rpx 14rpx 2rpx rgba(0, 0, 0, 0.2);
    border-radius: 48rpx;
    // position: fixed;
    // bottom:180rpx;
    // left:0;
    // right:0;
    margin: auto;
    margin-top: 80rpx;
  }
}
</style>
